<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>JSON Parser</title>
    <style type="text/css">
        input[type=text]
        {
            height: 25px;
        }
        input[type=text], textarea
        {
            font-size: 20px;
            padding: 3px 5px;
            border: 1px solid #0088ff;
        }
        input[type=submit], input[type=button], button
        {
            background-color: #dcdcdc;
            font-size: 1em;
            border-style: solid;
            border-width: 1px;
            border-color: #cccccc #666666 #666666 #cccccc;
        }
        div
        {
            padding: 10px;
        }
        .pre, pre
        {
            background-color: #e5e5cc;
            padding: 5px;
            font-family: Courier New;
            font-size: small;
            border: 1px #f0f0e0 solid;
        }
        legend
        {
            cursor: pointer;
            margin-left: 10px;
        }
    </style>

    <script type="text/javascript" src="json2.js"></script>

    <script type="text/javascript" src="jquery-1.4.2.js"></script>

    <script type="text/javascript" src="WSTestBase.js"></script>

    <script type="text/javascript">
        window.page = {};
        page.oJSON = null;
        page.btnParse_Click = function(sender) {
            var tbJSON = $("#tbJSON").get(0);
            try {
                this.oJSON = JSON.parse(tbJSON.value);
            } catch (e) { alert(e.name + ": " + e.description); return; }

            var html = WS.jsonToHtml(this.oJSON);
            html = "<i>Parsed JSON object is stored in <b>page.oJSON</b>.</i><br/>" + html;
            $("#divResult").html(html);
            $("li").addClass("pre");
        };

        page.btnClear_Click = function(sender) {
            $("#divResult").html("");
        };
        
        page.btnEval_Click = function(sender) {
            var tbJSON = $("#tbJSON").get(0);
            try {
                eval(tbJSON.value);
            } catch (e) { alert(e.name + ": " + e.description); return; }
        };
    </script>

</head>
<body style="font-family: Verdana; margin: 0; padding: 0px;">
    <div id="divWSName" style="color: white; font-family: Tahoma; font-size: 26px; background-color: #003366;
        margin: 0px; padding: 10px 0 3px 15px;">
        JSON Parser
    </div>
    <div id="divContent" style="padding: 15px;">
        <div>
            <span>Enter JSON string here:</span>
            <br />
            <textarea id="tbJSON" rows="10" cols="100" style="width: 900px; height: 200px;"></textarea>
        </div>
        <div>
            <input type="button" id="btnEval" value="Eval" onclick="page.btnEval_Click(this);" />
            <input type="button" id="btnParse" value="Parse" onclick="page.btnParse_Click(this);" />
            <input type="button" id="btnClear" value="Clear" onclick="page.btnClear_Click(this);" />
        </div>
        <fieldset>
            <legend onclick="WS.toggleVisible('divResult');">Result</legend>
            <div id="divResult" style="padding-left: 20px;" />
        </fieldset>
    </div>
</body>
</html>
